<template>
  <div class="home">
    <van-nav-bar title="商品分类列表" />
    <div class="home_box">
      <!-- 左边导航 -->
      <div class="home_box_left">
        <div
          :class="['home_box_left_item',{'active_item':activeindex == index ? true:false}]"
          v-for="(item,index) in GoodsList"
          :key="index"
          @click="twoList(index)"
        >{{item.cname}}</div>
      </div>
      <!-- 右边导航 -->
      <div class="home_box_right" ref="right" @touchstart="onMouseEnter">
        <div class="home_classify_right_box">
          <div v-for="(item,index) in GoodsList" :key="index" ref="block">
            <h3 style="text-align:center">{{item.cname}}</h3>
            <div class="homeclassify_child">
              <div class="child" v-for="(items,index) in item.subcategories" :key="index">
                <div class="child_box_img">
                  <img width="100%" :src="items.scpic" height="95%" />
                </div>
                <!-- 加减 -->
                <div>
                  <p>{{items.subcname}}</p>
                  <van-button
                    type="danger"
                    size="small"
                    class="goshoping"
                    @click="Addlocal(items)"
                  >加入购物车</van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="CartClick" :badge="AddLocal.length" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  computed: {
    AddLocal() {
      return this.$store.state.AddLocal;
    },
    GoodsList() {
      return this.$store.state.GoodsList;
    }
  },
  data() {
    return {
      isShow: false,
      activeindex: 0
    };
  },
  mounted() {
    this.$store.dispatch("GOODSLIST");

    this.$refs.right.addEventListener("scroll", this.onScroll);
  },
  methods: {
    twoList(index) {
      // 下标一致显示高亮
      this.activeindex = index;
      // 点击右侧滑动
      var divElement = this.$refs.block[this.activeindex];
      divElement.scrollIntoView({ behavior: "smooth" });
      this.$refs.right.removeEventListener("scroll", this.onScroll, false);
    },
    onScroll() {
      // window.console.log(event);
      //获取右侧滚动的距离
      var scrollOffset = event.target.scrollTop;
      // window.console.log(scrollOffset);

      //获取右侧所有 块
      var rightElements = this.$refs.block;
      for (let index = 0; index < rightElements.length; index++) {
        var currentElement = rightElements[index];
        var nextElement = rightElements[index + 1];
        if (
          scrollOffset > currentElement.offsetTop &&
          scrollOffset < nextElement.offsetTop
        ) {
          this.activeindex = index
        }
      }
    },
    onMouseEnter() {
      // window.console.log("11111111");
      this.$refs.right.addEventListener("scroll", this.onScroll);
    },
    // 加入购物车
    Addlocal(item) {
      this.$store.dispatch("ADDLOCAL", item);
    },
    // 跳转购物车页面
    CartClick() {
      this.$router.push({
        path: "/about"
      });
    }
  }
};
</script>
<style scoped>
.home_box {
  width: 100%;
  display: flex;
}
.home_box_left {
  width: 30%;
  /* border: 1px solid red; */
  height: 550px;
  overflow: scroll;
}
.home_box_right {
  width: 70%;
  /* border: 1px solid red; */
  height: 550px;
  overflow: scroll;
}
.home_box_left_item {
  padding: 2px;
  height: 42px;
  line-height: 42px;
  text-indent: 0.8rem;
  /* text-align: center; */
  border-bottom: 1px solid #cdcdcd;
}
.active_item {
  border-left: 2px solid hotpink;
}
.home_classify_right_box {
  width: 100%;
  min-height: 200px;
  /* border-bottom: 1px solid #999; */
}
.homeclassify_child {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: left;
}
.child > div:nth-child(2) {
  width: 53%;
  /* border: 1px solid hotpink; */
}
.child {
  width: 100%;
  height: 120px;
  border: 1px solid red;
  margin-left: 7.5px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.child_box_img {
  width: 45%;
  margin-top: 5px;
}
/deep/ .van-goods-action-icon {
  min-width: 122px;
}
.goshoping {
  float: right;
}
</style>
